<script setup lang="ts">
  import { ref, useTemplateRef } from 'vue'
  import { useQuasar } from 'quasar'

  import CudTable, { type TQTableColumns, type TRequestParam } from '@/components/CudTable.vue'
  import { editComplaint, getComplaintPageList, type IComplaintQueryParams } from '@/api'

  const $q = useQuasar()
  const filter = ref('')
  const tableRef = useTemplateRef('table')
  const resolvedRef = ref(null)

  const columns: TQTableColumns = [
    { name: 'complaintId', label: '投诉单ID', field: 'complaintId', align: 'left' },
    { name: 'complainantName', label: '投诉人姓名', field: 'complainantName', align: 'left' },
    {
      name: 'complaintHouseNumber',
      label: '投诉房号',
      field: 'complaintHouseNumber',
      align: 'left'
    },
    { name: 'complaintContent', label: '投诉内容', field: 'complaintContent', align: 'left' },
    { name: 'phoneNumber', label: '联系电话', field: 'phoneNumber', align: 'left' },
    { name: 'resolved', label: '是否已解决', field: 'resolved', align: 'left' }
  ]
  function request(context: TRequestParam) {
    const { page, rowsPerPage } = context.pagination
    const params: IComplaintQueryParams = { pageNum: page, pageSize: rowsPerPage }
    if (filter.value !== '') {
      params['complaintHouseNumber'] = filter.value
    }
    if (resolvedRef.value) {
      params['resolved'] = resolvedRef.value
    }
    return getComplaintPageList(params)
  }

  async function onChangeResolved(v: string, row: any) {
    const ov = row.resolved
    const res = await editComplaint({ complaintId: row.complaintId, resolved: v })
    if (res.data && res.data.code === 200) {
      $q.notify({
        type: 'positive',
        message: res.data.message || '修改成功'
      })
    } else {
      $q.notify({
        color: 'red-5',
        textColor: 'white',
        icon: 'warning',
        message: res.data.message || '修改失败'
      })
      row.role = ov
    }
  }

  function onKeyInput(event: KeyboardEvent) {
    if (event.key.toLowerCase() === 'enter') {
      // 13 为回车键
      onSearch()
    }
  }
  function onSearch() {
    if (tableRef.value) {
      tableRef.value.refreshUserTable(1)
    }
  }
</script>

<template>
  <q-page class="bg-[#FAFCFF] p-5">
    <CudTable
      ref="table"
      class="bg-white p-5"
      title="投诉管理"
      row-key="complaintId"
      :columns="columns"
      :request="request">
      <template v-slot:body-cell-resolved="{ row }">
        <q-td>
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeResolved(v, row)"
            v-model="row.resolved"
            val="已解决"
            label="已解决" />
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeResolved(v, row)"
            v-model="row.resolved"
            val="未解决"
            label="未解决" />
        </q-td>
      </template>
      <template v-slot:top-right>
        <q-select
          class="w-[200px] mr-3"
          outlined
          v-model="resolvedRef"
          @update:model-value="onSearch"
          :options="['已解决', '未解决']"
          label="是否已解决"
          dense
          clearable
          options-dense></q-select>
        <q-input outlined dense @keydown="onKeyInput" v-model="filter" placeholder="请输入房号查询">
          <template v-slot:append>
            <q-icon name="search" @click="onSearch" />
          </template>
        </q-input>
      </template>
    </CudTable>
  </q-page>
</template>

<style scoped></style>
